<!-- 导航栏 -->
<template>
    <van-nav-bar :title="title" fixed placeholder @click-left="clickLeft" @click-right="clickRight" :leftText="''" :left-arrow="!isDIYLeft" safe-area-inset-top :border="border"> 
        <template #right>
            <slot name="right"></slot>
        </template>
        <template v-if="isDIYLeft" #left>
            <slot name="left"></slot>
        </template>
    </van-nav-bar>
</template>

<script>
import { getCurrentInstance, ref , watch } from 'vue'
import { useRouter, useRoute } from "vue-router";
import { NavBar } from 'vant';
export default {
    props: {
        border: {
            default: false,
        },
        isDIYLeft: {
            default: false,
        }
    },
    components: {
        [NavBar.name]: NavBar,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        const route = useRoute();
        const title = ref('');
        const clickRight = () => {
            proxy.$emit('rightEvent');
        }
        const clickLeft = () => {
            if(!proxy.$props.isDIYLeft){
                history.back();
            }else{
                proxy.$emit('leftEvent');
            }
        }

        watch(
            () => route.path,
            () => {
                title.value = route.meta.title;
            },
            { immediate: true }
        );

        return {
            title,
            clickLeft,
            clickRight,
        }
    }
}

</script>
<style scoped>

</style>